<template>
	<app-layout>
		<view class="template-order">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar>记录</tn-nav-bar>
			<view class="list" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<view class="li" v-for="(item,idx) in list" :key="idx"
					@click="tn(`/discoveryPages/urinecheck/detail?id=${item.id}`)">
					<tn-list-cell unlined :arrow="true" :arrowRight="true">
						<view slot="default" class="tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="tn-flex tn-flex-row-center  tn-flex-col-center">

								<view v-if="item.sfyx==1" class="result tn-bg-red">
									阳性
								</view>
								<view v-if="item.sfyx==='0'" class="result tn-bg-green">
									阴性
								</view>
								<view v-if="item.sfyx===''" class="result tn-bg-orange">
									检测中
								</view>
								<view class="date">
									{{item.njtime}}
								</view>
							</view>

							<view class="type ">
								<!-- {{}} -->
							</view>
						</view>
					</tn-list-cell>
				</view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<bottom-btn v-if="waitgroup" :subtext="'录入'" @save="save" @submit="tnface"></bottom-btn>
			<!--  #endif-->
			<tn-empty v-if="list.length<1" class="error" icon="/static/error/common.png" mode="data"></tn-empty>
			<view class='tn-tabbar-height'></view>
		</view>
	</app-layout>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	import {
		mapGetters,
		mapState
	} from "vuex";

	export default {
		name: 'urinechecklist',
		mixins: [templatePageMixin],
		data() {
			return {
				page: 1,
				mfid: '',
				checkname: '',
				list: [],
			}
		},
		computed: {
			waitgroup() {
				let group = ['mj', 'pcs', 'zr', 'ld', 'dd', 'ys']
				return !group.includes(this.userinfo.usergroup)
			},
			...mapState({
				userinfo: state => state.userinfo,
			})
		},

		onShow() {
			if (!this.userinfo) {
				this.$user.getInfo()
			}
			this.getList()
		},
		onLoad(options) {
			if (options.mfid) {
				this.mfid = options.mfid
				this.checkname = options.checkname ? decodeURIComponent(options.checkname) : ''
			} else {
				uni.showModal({
					title: '提示',
					content: '用户ID不存在，请稍后再试',
					showCancel: false,
					success() {
						this.goBack()
					}
				})
			}
		},

		onReachBottom() {
			this.getList();
		},
		methods: {

			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},

			add() {

			},
			// 跳转需要选择用户并人脸识别
			tnface(return_url, type) {
				this.$t.vuex('return_url', `/discoveryPages/urinecheck/add?mfid=${this.mfid}`)
				uni.redirectTo({
					//检查类型  1走访2尿检3发检
					url: `/discoveryPages/check?id=${this.mfid}&checktype=2`
				});
			},

			getList() {
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.urinecheck.list,
					data: {
						limit_page: this.page,limit_count:20,
						type: this.type,
						mfid: this.mfid
					}
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						if (this.page !== 1) {
							this.list = this.list.concat(response.list);
						} else {
							this.list = response.list;
						}
						this.page = response.list.length ? this.page + 1 : this.page;
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.template-order {}

	.nobody {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}


	.list {
		// padding: 20rpx;

		.li {
			margin: 2rpx 0;
			border: 1px solid #eee;
			border-radius: 5px;

			.result {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				color: #fff;
			}

			.type {
				padding-right: 40rpx;
			}
		}
	}
</style>